<template>
    <div class="song-list">
        <ul class="mercy-ul">
            <li class="item flex flex-vertical-center" @click="selectItem(song, index)" v-for="(song, index) in songs" :key="index">
                <div class="content flex-1">
                    <h2 class="name" v-html="song.name"></h2>
                    <p class="desc" v-html="getdesc(song)"></p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'SongList',

  props: {
      songs: {
          type: Array,
          default: []
      }
  },

  methods: {
      getdesc(song) {
          return `${song.singer}·${song.album}`;
      },

      selectItem(song, index) {
          this.$emit('select', song, index)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">

.mercy-ul {
    padding: 20px 30px;
}

.item {
    box-sizing: border-box;
    height: 64px;
    font-size: 14px;

    .content {
        line-height: 20px;
        overflow: hidden;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #fff;
        }

        .desc {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 4px;
            color: hsla(0,0%,100%,.3);
        }
    }
}
</style>
